._txButton
  background var(--ghostB)
  border-radius 19px
  transform translateY(0px)
  cursor pointer
  position relative
  overflow hidden

  *
    pointer-events none

._txButton:hover
  // background var(--good)
  color var(--goodOver)
  box-shadow 0px 12px 12px var(--ghostZ)
  animation 5s shake ease-in-out infinite alternate

._txButton:hover::after
  content ''
  position absolute
  inset 0
  background white
  background var(--good)
  z-index 3

._txButtonBad:hover
  color var(--badOver)

._txButtonBad:hover::after
  content ''
  position absolute
  inset 0
  background white
  color var(--badOver)
  background var(--bad)
  z-index 3

._txButton:active
  transform translateY(0px)
  // animation-name shake-little
  // animation-duration 2s
  // animation-timing-function: ease-in-out
  // animation-iteration-count: infinite
  box-shadow 0px 2px 2px var(--ghostX)

@keyframes shake 
  0% 
    transform translate3d(0px, 0px, 0) rotate(-0.4deg) scale(1)
  25% 
    transform translate3d(-0.7px, -1px, 0) rotate(0.4deg) scale(1.01)
  50% 
    transform translate3d(0.7px, 1px, 0) rotate(-0.4deg) scale(1.02)
  75% 
    transform translate3d(-0.7px, 0.3px, 0) rotate(0.2deg) scale(1.01)
  100% 
    transform translate3d(0.7px, 0.7px, 0) rotate(-0.4deg) scale(1)


@keyframes shake-little 
  2% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  4% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  6% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  8% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  10% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  12% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  14% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  16% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  18% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  20% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  22% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  24% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  26% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  28% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  30% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  32% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  34% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  36% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  38% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  40% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  42% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  44% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  46% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  48% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  50% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  52% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  54% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  56% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  58% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  60% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  62% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  64% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  66% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  68% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  70% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  72% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  74% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  76% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  78% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  80% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  82% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  84% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  86% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  88% 
    transform: translate(0px, 0px) rotate(0.5deg) 
  90% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  92% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  94% 
    transform: translate(1px, 1px) rotate(0.5deg) 
  96% 
    transform: translate(0px, 1px) rotate(0.5deg) 
  98% 
    transform: translate(1px, 0px) rotate(0.5deg) 
  0%, 100% 
    transform: translate(0, 0) rotate(0)  

.txViewData
  margin 64px 8px
  background var(--ghostA)
  padding 32px 6px 64px 6px
  border-radius 26px
  border-bottom 2px solid var(--ghostZ)
  box-shadow 0px 4px 8px var(--ghostY), 0px 2px 8px var(--ghostY)

  .txViewDataHeader
    padding 0px 0px
    margin-bottom 32px
    font-family 'VCR'
    text-transform uppercase
    font-size 18px
    text-align center
    font-weight 400
    letter-spacing 6px
    margin-left 4px
    opacity 1

._txModule
  position absolute
  top 130px
  left 10px
  right 10px
  height 30px
  z-index 100000
  box-shadow 0px 0px 0px var(--ghostZ)
  
  ._txModuleInner
    position absolute 
    top 0
    right 0
    bottom 0
    left 0
    background var(--ghostC)
    border-radius 8px
    display flex
    flex-direction row
    align-items stretch
    font-weight 300
    // overflow hidden

    ._txModuleSlice
      display flex
      justify-content center
      align-items center
      text-transform uppercase
      font-size 12px
      // border-right 1px solid var(--ghostA)
      padding 0px 6px
      font-family 'FiraCode'

._txBody
  width 100%
  margin 0px 6px
  padding-top 22px

.txDescriptionSummaryStandalone
  display flex
  justify-content center
  align-items center
  flex-direction column
  padding 18px 6px 20px 6px
  font-size 16px
  font-weight 600
  border-top 2px solid var(--ghostY)
  margin 12px 12px 0px 12px
  font-family VCR
  text-transform uppercase

  div, span
    margin 0px 2px


._txDescription
  width 100%
  font-family 'MainFont'
  font-size 16px
  font-weight 400
  cursor pointer
  padding 12px

  *
    pointer-events none

  ._txDescriptionSummary
    display flex
    justify-content center
    align-items center
    flex-direction column

    ._txDescriptionSummaryMain
      padding 12px
      text-align center

    ._txDescriptionSummaryTag
      font-size 12px
      font-weight 500
      text-transform uppercase
      text-align center
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      width 300px

    ._txDescriptionSummaryHeadline
      font-size 26px

    ._txDescriptionSummaryMidline
      font-size 12px

  ._txDescriptionTag
    font-size 10px
    width 100%
    border-top 1px solid var(--ghostX)
    padding 10px 20px
    text-transform uppercase

@import '../AdjustFee/style'
@import '../ViewData/style'
